<template>
	<view class="sally-checkbox" :class="[`sally-checkbox--${checkboxPlacement}`,{'is--disabled': disabled}]"
		@click="handleCheckChange">
		<view class="sally-checkbox--icon" :class="'sally-'+type+'-checked'" v-if="checkedStatus === 2">
		</view>
		<view class="sally-checkbox--icon" :class="'sally-'+type+'-indeterminate'" v-else-if="checkedStatus === 1">
		</view>
		<view class="sally-checkbox--icon" :class="'sally-'+type+'-outline'" v-else>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'sally-checkbox',
		props: {

			type: {
				type: String,
				default: 'checkbox', //radio,checkbox
			},
			/**
			 * 选择框的位置，可选 left/right
			 */
			checkboxPlacement: {
				type: String,
				default: 'left',
			},
			/**
			 */
			disabled: {
				type: Boolean,
				default: false,
			},
			/**
			 */
			checkedStatus: {
				type: Number,
				default: 1,
			},
		},
		methods: {

			handleCheckChange() {

				this.$emit('change')
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 灰色加载
	.sally-loading {
		background-image: url('');
		opacity: 0.7;
	}

	// 灰色三角
	.sally-arrow-down {
		background-image: url('');
	}

	// 多选-灰色选择边框
	.sally-checkbox-outline {
		background-image: url('');

		// 颜色太深了，减淡一点
		opacity: 0.4;
	}

	// 多选-蓝色选中
	.sally-checkbox-checked {
		background-image: url('');
	}

	// 多选-蓝色半选中
	.sally-checkbox-indeterminate {
		background-image: url('');
	}

	// 单选-灰色选择边框
	.sally-radio-outline {
		background-image: url('');

		// 颜色太深了，减淡一点
		opacity: 0.4;
	}

	// 单选-蓝色选中
	.sally-radio-checked {
		background-image: url('');
	}

	// 单选-蓝色半选中
	.sally-radio-indeterminate {
		background-image: url('');
	}

	.sally-checkbox--icon {
		width: 2rem;
		height: 2rem;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}
</style>